<template>
  <div>

    <!-- #545c64 -->


    <el-menu :default-active="activeIndex" active-text-color="yellow" background-color="#de361f" class="el-menu-demo"
             mode="horizontal" router style="padding-left: 218px; " text-color="#fff" @select="handleSelect">

      <!--      <div style="flex: 1"></div>-->

      <!-- <el-menu-item index="/department" ><i class="el-icon-house"></i>院系管理</el-menu-item> -->

      <div v-for="item in menus" :key="item.menuId" style="display: inline-block">

        <el-menu-item :index="item.menuPath">{{ item.menuName }}</el-menu-item>

      </div>


      <!--      <el-menu-item index="/profession">专业管理</el-menu-item>-->

      <!--      <el-menu-item index="/class">班级管理</el-menu-item>-->

      <!--      <el-menu-item index="/teacher">教师管理</el-menu-item>-->

      <!--      <el-menu-item index="/course">课程管理</el-menu-item>-->

      <!--      <el-menu-item index="/student">学生管理</el-menu-item>-->

      <!--      <el-menu-item index="/userstudent">我是学生我选课</el-menu-item>-->

      <!--      <el-menu-item index="/permission">权限管理</el-menu-item>-->

      <!--            <el-button>编辑公告</el-button>-->

      <!--      <el-menu-item index="4"><a href="//localhost:8081/login" target="_blank">点这个重新登录(测试用)</a></el-menu-item>-->


    </el-menu>


  </div>
</template>

<script>
import Home from "@/views/Home";

export default {
  name: "Header2",
  components: {Home},
  props: {
    menus: Array
  },
  data() {
    return {
      activeIndex: localStorage.getItem("title")

    };
  },
  methods: {
    handleSelect(key, keyPath) {
      this.activeIndex = keyPath
      console.log(key, keyPath);
      localStorage.setItem("title", keyPath)
    }
  },
}
</script>

<style scoped>

</style>
